<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="Author" content="Captain Chen">
    <meta name="Keywords" content="Sudoku">
    <title>Captain Chen's Web Sudoku</title>
    <script src="./static/jquery-3.6.0.min.js"></script>
    <style type=text/css>
        h1 {
            color: rgb(0, 140, 255);
        }

        table {
            border: 2px solid black
        }

        td {
            width: 10mm;
            height: 10mm;
            text-align: center;
            font-size: xx-large;
            background-color: #eeeeee;
        }

        .rightBolder {
            border-right: 2px solid black
        }

        .bottomBolder {
            border-bottom: 2px solid black
        }

        .zeroCell {
            color: rgb(0, 255, 0);
            font-weight: bold;
            background-color: rgb(0, 110, 255)
        }

        .errorCell {
            color: rgb(255, 187, 0);
            font-weight: bold;
            background-color: rgba(255, 0, 0, 0.644)
        }

        .button.red {
            border: 1px solid #b42323;
            box-shadow: 0 1px 2px #e99494 inset, 0 -1px 0 #954b4b inset, 0 -2px 3px #e99494 inset;
            background: -webkit-linear-gradient(top, #d53939, #b92929);
            background: -moz-linear-gradient(top, #d53939, #b92929);
            background: linear-gradient(top, #d53939, #b92929);
        }

        .red:hover {
            background: -webkit-linear-gradient(top, #eb6f6f, #c83c3c);
            background: -moz-linear-gradient(top, #eb6f6f, #c83c3c);
            background: linear-gradient(top, #eb6f6f, #c83c3c);
            cursor: pointer;
        }

        .red:active {
            top: 1px;
            box-shadow: 0 1px 3px #5b0505 inset, 0 3px 0 #ffffff00;
            background: -webkit-linear-gradient(top, #b11a1a, #bf2626);
            background: -moz-linear-gradient(top, #b11a1a, #bf2626);
            background: linear-gradient(top, #b11a1a, #bf2626);
        }

        .button.gray {
            color: #8c96a0;
            text-shadow: 1px 1px 1px #fff;
            border: 1px solid #dce1e6;
            box-shadow: 0 1px 2px #fff inset, 0 -1px 0 #a8abae inset;
            background: -webkit-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: -moz-linear-gradient(top, #f2f3f7, #e4e8ec);
            background: linear-gradient(top, #f2f3f7, #e4e8ec);
        }

        #submit_button {
            position: relative;
            left: 12cm;
            top: -6cm;
            width: 140px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            font-size: large;
            color: #ffffff;
            text-shadow: 1px 1px 1px #333;
            border-radius: 5px;
            margin: 0 20px 20px 0;
            overflow: hidden;
        }
    </style>
</head>

<body style="width:800px;margin:0px auto;">
    <h1 id="difficulty">数独难度：</h1>
    <h1 id="time">已用时间：0s</h1>
    <div id="sudoku_board">
    </div>
    <script type="text/javascript">
        var used_time = 0;
        $(document).ready(function () {
            $.get("/get_data", function (ret) {
                diff = parseInt(ret[0]);
                if (diff == 1)
                    $("#difficulty").html("数独难度：简单");
                else if (diff == 2)
                    $("#difficulty").html("数独难度：中等");
                else if (diff == 3)
                    $("#difficulty").html("数独难度：困难");
                else
                    $("#difficulty").html("数独难度：未知");
                ret = ret.slice(2);
                $("#sudoku_board").append(ret);
                $(".input_cell").blur(function () {
                    var s = $(this).text();
                    s = s.slice(-1);
                    if (s.length > 0 && (isNaN(s) || parseInt(s) == 0)) {
                        $(this).html("");
                        alert("只能输入1~9的数字")
                    }
                    else
                        $(this).html(s);
                    if (check_sudo()) {
                        $("#submit_button").removeAttr("disabled");
                        $("#submit_button").addClass("red").removeClass("gray");
                    }
                    else {
                        $("#submit_button").addClass("gray").removeClass("red");
                        $("#submit_button").attr("disabled", "disabled");
                    }
                });
            });
            $("#submit_button").click(finish_game);
            used_time = 0;
            setInterval(update_time, 1000);
        });
        function update_time() {
            used_time++;
            $("#time").html("已用时间：" + used_time + "s");
        }
        function check_row(data) {
            var tag = true;
            var vis = new Array(10);
            for (var i = 0; i < 9; i++) {
                for (var k = 0; k <= 9; k++)
                    vis[k] = -1;
                for (var j = 0; j < 9; j++)
                    if (data[i * 9 + j] != 0) {
                        if (vis[data[i * 9 + j]] != -1) {
                            setErrorCell(i * 9 + j);
                            setErrorCell(vis[data[i * 9 + j]]);
                            tag = false;
                        }
                        vis[data[i * 9 + j]] = i * 9 + j;
                    }
            }
            return tag;
        }
        function check_col(data) {
            var tag = true;
            var vis = new Array(10);
            for (var j = 0; j < 9; j++) {
                for (var k = 0; k <= 9; k++)
                    vis[k] = -1;
                for (var i = 0; i < 9; i++)
                    if (data[i * 9 + j] != 0) {
                        if (vis[data[i * 9 + j]] != -1) {
                            setErrorCell(i * 9 + j);
                            setErrorCell(vis[data[i * 9 + j]]);
                            tag = false;
                        }
                        vis[data[i * 9 + j]] = i * 9 + j;
                    }
            }
            return tag;
        }
        function check_diag(data) {
            var tag = true;
            var vis = new Array(10);
            for (var k = 0; k <= 9; k++)
                vis[k] = -1;
            for (var i = 0; i < 9; i++)
                if (data[i * 9 + i] != 0) {
                    if (vis[data[i * 9 + i]] != -1) {
                        setErrorCell(i * 9 + i);
                        setErrorCell(vis[data[i * 9 + i]]);
                        tag = false;
                    }
                    vis[data[i * 9 + i]] = i * 9 + i;
                }
            for (var k = 0; k <= 9; k++)
                vis[k] = -1;
            for (var i = 0; i < 9; i++) {
                var j = 8 - i;
                if (data[i * 9 + j] != 0) {
                    if (vis[data[i * 9 + j]] != -1) {
                        setErrorCell(i * 9 + j);
                        setErrorCell(vis[data[i * 9 + j]]);
                        tag = false;
                    }
                    vis[data[i * 9 + j]] = i * 9 + j;
                }
            }
            return tag;
        }
        function check_blk(data) {
            var tag = true;
            var vis = new Array(10);
            for (var i = 0; i < 9; i++) {
                for (var k = 0; k <= 9; k++)
                    vis[k] = -1;
                for (var j = 0; j < 9; j++) {
                    var x = Math.floor(i / 3) * 3 + Math.floor(j / 3);
                    var y = (i % 3) * 3 + (j % 3);
                    var s = x * 9 + y;
                    if (data[s] != 0) {
                        if (vis[data[s]] != -1) {
                            setErrorCell(s);
                            setErrorCell(vis[data[s]]);
                            tag = false;
                        }
                        vis[data[s]] = s;
                    }
                }
            }
            return tag;
        }
        function reset_cell(data) {
            $(".input_cell").removeClass("errorCell");
        }
        function setErrorCell(id) {
            x = Math.floor(id / 9); y = id % 9;
            str = "#input_cell_" + x + y;
            $(str).addClass("errorCell");
        }
        function getData() {
            var cells = document.getElementsByClassName("input_cell");
            var data = new Array(81);
            for (var i = 0; i < 81; i++)
                data[i] = 0;
            for (var i = 0; i < cells.length; i++) {
                var x = parseInt(cells[i].id.slice(-2, -1));
                var y = parseInt(cells[i].id.slice(-1));
                var id = x * 9 + y;
                var t = cells[i].innerHTML;
                if (t.length > 0)
                    data[id] = parseInt(t);
            }
            return data;
        }
        function check_sudo() {
            var data = getData();
            reset_cell();
            var tag = true;
            if (!check_row(data))
                tag = false;
            if (!check_col(data))
                tag = false;
            //if (!check_diag(data))
            //    tag = false;
            if (!check_blk(data))
                tag = false;
            for (var i = 0; i < 81; i++)
                if (data[i] == 0)
                    tag = false;
            return tag;
        }
        function finish_game() {
            var data = getData();
            $.post("/finish_game", { data: data.toString(), used_time: used_time }, function (ret) {
                if (ret == "Success!")
                    window.location.href = "winning/" + used_time;
                else
                    alert("You Cheat!");
            });
        }

    </script>
    <button id="submit_button" type="submit" class="button gray" disabled="disabled">提交结果</button>
</body>

</html>